<template>
  <div class="flex  flexBox" ref="containerRef">
    <!-- 分类纵向列表 -->
    <div class="category-tabs">
      <div
        v-for="cat in [{ id: 0, name: '全部' }, ...categoryList]"
        :key="cat.id"
        :class="['category-tab', { active: cat.id === categoryId }]"
        :style="cat.id === categoryId
          ? {
              color: property.categoryBtn.actColor,
              paddingLeft: property.categoryBtn.btnPadding+'px',
              paddingRight: property.categoryBtn.btnPadding+'px',
              height: property.categoryBtn.btnHeight+'px',
              borderRadius: property.categoryBtn.btnBorderRadius+'px',
              fontSize: property.categoryBtn.btnFontSize+'px',
              background: `linear-gradient(91.15deg, ${property.categoryBtn.bgBeginColor}, ${property.categoryBtn.bgEndColor})`,
              fontWeight: property.categoryBtn.weight?'bold':'400',
            }
          : {
              color: property.categoryBtn.notColor,
              paddingLeft: property.categoryBtn.btnPadding+'px',
              paddingRight: property.categoryBtn.btnPadding+'px',
              height: property.categoryBtn.btnHeight+'px',
              borderRadius: property.categoryBtn.btnBorderRadius+'px',
              fontSize: property.categoryBtn.btnFontSize+'px',
              borderRight: '2px solid transparent',
              background: '#f7f7f7',
              fontWeight: property.categoryBtn.weight?'bold':'400',
            }"
        @click="onCategoryChange(cat.id)"
      >
        {{ cat.name }}
      </div>
    </div>

    <div class="flex flex-row">
      <!-- 分类侧边栏列表区域 -->
      <div class="sides">
        <div
class="side-item" 
          v-for="cat in [{ id: 0, name: '全部' }, ...categoryList]"
          :key="cat.id"
          :class="{ active: cat.id === categoryId }"
          :style="cat.id === categoryId
          ? {
              color: property.categoryBtn.sideActColor,
              paddingTop: property.categoryBtn.sidePadding+'px',
              paddingBottom: property.categoryBtn.sidePadding+'px',
              height: property.categoryBtn.sideHeight+'px',
              fontSize: property.categoryBtn.sideFontSize+'px',
              background:property.categoryBtn.sideActBgColor,
              fontWeight: property.categoryBtn.sideWeight?'bold':'400',
            }
          : {
            color: property.categoryBtn.sideNotColor,
              paddingTop: property.categoryBtn.sidePadding+'px',
              paddingBottom: property.categoryBtn.sidePadding+'px',
              height: property.categoryBtn.sideHeight+'px',
              fontSize: property.categoryBtn.sideFontSize+'px',
              background:property.categoryBtn.sideDefalutBgColor,
              fontWeight: property.categoryBtn.sideWeight?'bold':'400',
            }"
          @click="onCategoryChange(cat.id)"
        >
          {{ cat.name }}
        </div>
      </div>
      <!-- 商品列表区域 -->
      <div class="flex-1">
        <div
          class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
          :style="{
            ...calculateSpace(index),
            ...calculateWidth(),
            borderTopLeftRadius: `${property.borderRadiusTop}px`,
            borderTopRightRadius: `${property.borderRadiusTop}px`,
            borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
            borderBottomRightRadius: `${property.borderRadiusBottom}px`
          }"
          v-for="(spu, index) in spuList"
          :key="index"
        >
          <!-- 角标 -->
          <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
            <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
          </div>
          <!-- 商品封面图 -->
          <div
            :class="[
              'h-140px',
              {
                'w-full': property.layoutType !== 'oneColSmallImg',
                'w-140px': property.layoutType === 'oneColSmallImg'
              }
            ]"
          >
            <el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
          </div>
          <div
            :class="[
              ' flex flex-col gap-8px p-8px box-border',
              {
                'w-full': property.layoutType !== 'oneColSmallImg',
                'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
              }
            ]"
          >
            <!-- 商品名称 -->
            <div
              v-if="property.fields.name.show"
              :class="[
                'text-14px ',
                {
                  truncate: property.layoutType !== 'oneColSmallImg',
                  'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
                }
              ]"
              :style="{ color: property.fields.name.color }"
            >
              {{ spu.name }}
            </div>
            <!-- 商品简介 -->
            <div
              v-if="property.fields.introduction.show"
              class="truncate text-12px"
              :style="{ color: property.fields.introduction.color }"
            >
              {{ spu.introduction }}
            </div>
            <div>
              <!-- 价格 -->
              <span
                v-if="property.fields.price.show"
                class="text-16px"
                :style="{ color: property.fields.price.color }"
              >
                ￥{{ fenToYuan(spu.price as any) }}
              </span>
              <!-- 市场价 -->
              <span
                v-if="property.fields.marketPrice.show && spu.marketPrice"
                class="ml-4px text-10px line-through"
                :style="{ color: property.fields.marketPrice.color }"
                >￥{{ fenToYuan(spu.marketPrice) }}
              </span>
            </div>
            <div class="text-12px">
              <!-- 销量 -->
              <span
                v-if="property.fields.salesCount.show"
                :style="{ color: property.fields.salesCount.color }"
              >
                已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
              </span>
              <!-- 库存 -->
              <span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }">
                库存{{ spu.stock || 0 }}
              </span>
            </div>
          </div>
          <!-- 立即购买按钮 -->
          <div v-if="property.btnType.type === 'buy'" class="absolute bottom-8px right-8px">
              <!-- 文字按钮 -->
              <span
                v-if="property.btnBuy.type === 'text'"
                class="rounded-full p-x-12px p-y-4px text-12px text-white"
                :style="{
                  background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
                }"
              >
                {{ property.btnBuy.text }}
              </span>
              <!-- 图片按钮 -->
              <el-image
                v-else
                class="h-28px w-28px rounded-full"
                fit="cover"
                :src="property.btnBuy.imgUrl"
              />
            </div>

            <!-- 加入购物车按钮 -->
            <div v-if="property.btnType.type === 'cart'" class="absolute bottom-8px right-8px">
              <!-- 文字按钮 -->
              <span
                v-if="property.btnCart.type === 'text'"
                class="rounded-full p-x-12px p-y-4px text-12px text-white"
                :style="{
                  background: `linear-gradient(to right, ${property.btnCart.bgBeginColor}, ${property.btnBuy.bgEndColor}`
                }"
              >
                {{ property.btnCart.text }}
              </span>
              <!-- 图片按钮 -->
              <el-image
                v-else
                class="h-28px w-28px rounded-full"
                fit="cover"
                :src="property.btnCart.imgUrl"
              />
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CategoryProductCardProperty } from './config'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { fenToYuan } from '../../../../../utils'

/** 商品卡片 */
defineOptions({ name: 'CategoryProductCard' })
// 定义属性
const props = defineProps<{ property: CategoryProductCardProperty }>()
// 商品列表
const spuList = ref<ProductSpuApi.Spu[]>([])

/**
 * 计算商品的间距
 * @param index 商品索引
 */
const calculateSpace = (index: number) => {
  // 商品的列数
  const columns = props.property.layoutType === 'twoCol' ? 2 : 1
  // 第一列没有左边距
  const marginLeft = index % columns === 0 ? '0' : props.property.space + 'px'
  // 第一行没有上边距
  const marginTop = index < columns ? '0' : props.property.space + 'px'

  return { marginLeft, marginTop }
}

// 容器
const containerRef = ref()
// 计算商品的宽度
const calculateWidth = () => {
  let width = '100%'
  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
  if (props.property.layoutType === 'twoCol') {
    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`
  }
  return { width }
}


const categoryList = ref([])
const categoryId = ref(0)


const fetchCategoryList = async () => {
  categoryList.value = await ProductCategoryApi.getCategoryList({})
}
const fetchSpuList = async () => {
   let res =  await ProductSpuApi.getSpuPage({
    pageNo: 1,
    pageSize: 10,
    categoryId:  categoryId.value === 0 ? undefined : categoryId.value
  })
  spuList.value = res.list
}
const onCategoryChange = (id: number) => {
  categoryId.value = id
  fetchSpuList()
}

onMounted(async () => {
  await fetchCategoryList()
  await fetchSpuList()
})
</script>

<style scoped lang="scss">
  .category-tabs {
  display: flex;
  margin-bottom: 12px;
  overflow-x: auto;
  white-space: nowrap;
}

.category-tab {
  padding: 0px 20px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.flexBox{
  flex-direction: column;
}
.sides {
  width: 90px;
  background: #f8f8f8;
  height: 100vh;
  overflow-y: auto;

  .side-item {
    padding: 15px 10px;
    text-align: center;
    font-size: 14px;
    color: #333;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
}
</style>
